<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试写一个切换功能</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <h3 v-if="TabId==1">我是第一个按钮内容</h3>
        <h3 v-else-if="TabId==2">我是第二个按钮内容</h3>
        <h3 v-else>我是第三个按钮内容</h3>

        <button @click="tabChange" data-id="1">我是按钮1</button>
        <button @click="tabChange" data-id="2">我是按钮2</button>
        <button @click="tabChange" data-id="3">我是按钮3</button>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
                TabId:1
            },
            methods:{
                tabChange:function (e) {
                    let tabid = e.target.dataset.id;
                    app.TabId = tabid;
                }
            }
        })
    </script>
</body>
</html>